<!DOCTYPE html>
<html>
<head>
	<title>简易JS年历</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			font:12px/1.5 Tahoma;
		}
		ul,li,div,h2,p{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 248px;
			margin:10px auto;
			background: #eaeaea;
			padding:0 0 10px 10px;
		}
		ul,li{
			list-style: none;
		}
		ul{
			overflow: hidden;
		}
		ul li{
			background: #424242;
			color: #fff;
			width: 40px;
			height: 40px;
			margin:10px 10px 0 0;
			padding:5px;
			float: left;
			cursor: pointer;
			border:1px solid #424242;
			line-height: 1.3;
			text-align: center;
			font-size: 14px;
		}
		ul li strong{
			font-weight: bold;
			font-size: 18px;
			display: block;
		}
		ul li.current{
			background: #fff;
			color: #f69;
		}
		#msg{
			color:#666;
			background:#f1f1f1;
			border:1px solid #fff;
			margin:10px 10px 0 0;
			padding:5px;
		}
		#msg h2{
			font-size:14px;
		}
	</style>
</head>
<body>
<div class="container">
	 <ul>
        <li><strong>1</strong>JAN</li>
        <li><strong>2</strong>FER</li>
        <li><strong>3</strong>MAR</li>
        <li><strong>4</strong>APR</li>
        <li><strong>5</strong>MAY</li>
        <li class="current"><strong>6</strong>JUN</li>
        <li><strong>7</strong>JUL</li>
        <li><strong>8</strong>AUG</li>
        <li><strong>9</strong>SEP</li>
        <li><strong>10</strong>OCT</li>
        <li><strong>11</strong>NOV</li>
        <li><strong>12</strong>DEC</li>
    </ul>
    <div id="msg">
    	<h2><strong>6</strong>月节日</h2>
    	<p>端午节：6月4日至6日放假3天。</p>
    </div>
</div>
<script type="text/javascript">
	window.onload=function (){
		var btns=document.getElementsByTagName('li');
		var holidays=[
			"元旦：1月1日至3日放假三天。",
		"春节：2月2日至8日放假7天。",
		"妇女节：3月8日妇女节，与我无关。",
		"清明节：4月3日至5日放假3天",
		"劳动节：4月30日至5月2日放假3天。",
		"端午节：6月4日至6日放假3天。",
		"小暑：7月7日小暑。不放假。",
		"七夕节：8月6日七夕节。不放假。",
		"中秋节：9月10日至12日放假3天。",
		"国庆节：10月1日至7日放假7天。",
		"立冬：11月8日立冬。不放假。",
		"艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"

		];
		var msg=document.getElementById('msg');
		var p=msg.getElementsByTagName('p')[0];
		var strong=msg.getElementsByTagName('strong')[0];
		for(var i=0;i<btns.length;i++){
			btns[i].index=i;
			btns[i].onmouseover=function(){
				for(var j=0;j<btns.length;j++) btns[j].className='';
					this.className='current';
				p.innerText=holidays[this.index];
				strong.innerText=this.index+1;

			}
		}
	}
</script>
</body>
</html>